<template>
	<view class="content">
		<navBar title="Super专区" :change="scrollChange" ref="navHeader"></navBar>
		<view class="header-bg" :style="'margin-top:-'+headerHeight+'px'">
			<image src="/static/miaojie/super_bg.png" mode="widthFix" />
		</view>
		<view class="act-rule">规则</view>
		<view class="container">
			<scroll-view scroll-x class="nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in navList" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
			<view class="shopowner" v-show="TabCur==1">
				<view class="card">
					<image src="/static/miaojie/super_card.png" mode="widthFix" />
					<view class="card-text">
						<view class="price"><text>￥</text>3000</view>
						<view class="card-btn" @click="godetail()">立即升级店长</view>
					</view>
				</view>
			</view>
			<scroll-view class="grabBag_content" :scroll-y="true" @scrolltolower="lower">
			<view class="list flex" v-for="(item,index) in superGoodsList" :key="index" v-show="TabCur==0">
				
				<view class="list-img flex justify-center align-center">
					<image :src="item.pic" mode="widthFix" />
				</view>
				<view class="list-info">
					<view class="info-title text-cut">{{item.name}}</view>
					<view class="progress">
						<view class="cu-progress round xs">
							<view class="bg-red" style="width:68%"></view>
						</view>
						<view class="progress-text text-right">库存：{{item.stock}}件</view>
					</view>
					<view class="info-price flex align-center">
						 <view class="tag flex">
							<view class="tag-left">优享价</view>
							<view class="tag-right"></view>
						 </view>
						<view class="price"><text>￥</text>{{item.price}}</view>
					</view>
					<!-- <view class="yuan-price text-line">市场价：￥35099.00</view> -->
					<view class="btn"  @click="navToDetailPage1(item.id,item.sale)">查看</view>
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import navBar from "@/components/header-nav";
export default {
	components: {
		uniLoadMore,
		navBar
	},
	data() {
		return {
			headerHeight: 0,
			scrollChange: false,
			list: [1,2,3,4],
			navList: ['导购专区','店长专区'],
			TabCur: 0,
			scrollLeft: 0,
			superGoodsList:[],
			zhituicurrpage:1,
			zhituitotal:0,
		};
	},

	onLoad() {
		
	},
	onShow() {
		this.loadData()
	},
	onReady() {
			this.headerHeight = uni.getStorageSync('headerHeight');
	},
	onPageScroll(e) {
		if(e.scrollTop>this.headerHeight){
			this.scrollChange = true
		}else{
			this.scrollChange = false
		}
	},
	methods: {
		// 下一页
		async lower() {
			//console.log('底部');
			let num = parseInt(this.zhituicurrpage);
			let pageNum = num + 1;
			let params = {
				pageNum: pageNum,
				pageSize: 10,
				isQuick: 1,
			};
			//console.log('翻页',params)
			if (this.zhituicurrpage <= this.zhituitotal) {
				let res = await Api.apiCall('','single/pms/goods/list', params,true);
				this.zhituicurrpage = res.current;
				//console.log('super商品列表',res);
				this.superGoodsList = this.superGoodsList.concat(res.records);
			}
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
		},
		navTo(e){
			uni.navigateTo({
				 url: e
			});
		},
		// 跳转到商品详情
		godetail(){
			uni.navigateTo({
				url: '../../pagesA/product/product?id=' + 2
			});
		},
		//获取super商品列表
		async loadData() {
			let params = {
				isQuick: 1,
				pageNum:1,
				pageSize:10
			}
			let res = await Api.apiCall('','single/pms/goods/list', params,true);
			//console.log('super商品列表',res);
			this.zhituitotal = res.pages;
			this.zhituicurrpage = res.current;
			this.superGoodsList = res.records;
		},
		//跳转至商品详情页
		navToDetailPage1(id,saleId) {
			uni.navigateTo({
				url: '../../pagesA/product/product?id=' + id
			});
		},
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	min-height: 100vh;
	position: relative;
	.header-bg{
		width: 100%;
		font-size: 0;
		image{
			width: 100%;
		}
	}
	.container{
		background: linear-gradient(to bottom,#FFD656,#fff);
		padding: 20upx 20upx 90upx;
		.nav .cu-item{
			font-size: 32upx;
			color: #F94242;
			font-weight: bold;
		}
		.nav .cu-item.cur{
			color: #fff;
			font-size: 36upx;
			border: 0;
			background: linear-gradient(to top,#FF7777,#FF1D1D);
			border-radius:20upx 20upx 0px 0px;
		}
		.nav{
			margin-bottom: 20upx;
		}
		.list{
			padding: 20upx;
			background: #fff;
			margin-bottom: 20upx;
			border-radius: 20upx;
			box-shadow:6px 6px 12px 0px rgba(0,0,0,0.06);
			.list-img{
				width: 280upx;
				height: 280upx;
				border-radius:14upx;
				border:1px solid rgba(245,245,245,1);
				image{
					width: 100%;
				}
			}
			.list-info{
				width: calc(100% - 300upx);
				margin-left: 20upx;
				.info-title{
					max-width: 100%;
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}
				.progress{
					padding-bottom: 10upx;
					.progress-text{
						font-size: 20upx;
						color: #666;
						padding-top: 6upx;
					}
				}
				.info-price{
					.tag{
						.tag-left{
							height: 33upx;
							font-size: 20upx;
							line-height: 36upx;
							padding-left: 10upx;
							background: #FF9D35;
							border-radius:6upx 0px 0px 6upx;
							color: #fff;
						}
						.tag-right{
							width: 0;
							height: 0;
							border-right: 20upx solid transparent;
							border-top: 32upx solid #FF9D35;
						}
					}
					.price{
						font-size: 48upx;
						color: #F94242;
						text{
							font-size: 26upx;
						}
					}
				}
				.yuan-price{
					font-size: 26upx;
					color: #999;
				}
				.bargain-price{
					display: inline-block;
					margin-top: 20upx;
					padding: 6upx 8upx;
					border-radius: 6upx;
					background: linear-gradient(to right,#FF7777,#FF1D1D);
					font-size: 24upx;
					color: #fff;
				}
				.btn{
					background: linear-gradient(to right,#FBC900,#F88400);
					box-shadow:0px 3upx 10upx 0px rgba(248,141,0,0.64);
					border-radius:30upx;
					width: 200upx;
					height: 60upx;
					color: #fff;
					line-height: 60upx;
					font-size: 28upx;
					text-align: center;
					margin-top: 16upx;
					margin-left: auto;
				}
			}
		}
		.shopowner{
			.card{
				position: relative;
				image{
					width: 100%;
				}
				.card-text{
					position: absolute;
					right: 8%;
					bottom: 80upx;
					.price{
						text-align: center;
						color: #fff;
						font-size: 72upx;
						text{
							font-size: 32upx;
						}
					}
					.card-btn{
						margin-top: 60upx;
						padding: 20upx 40upx;
						background: linear-gradient(to right,#FBC900,#F88400);
						font-size: 30upx;
						color: #fff;
						border-radius: 36upx;
					}
				}
			}
		}
	}

}

.grabBag_content{
	height: 80vh;
}

</style>
